<template>
  <h1>金钱：{{ money }}</h1>
  <button @click="spendBtn">花钱</button>
  <h2>数量：{{ count }}</h2>
  <button @click="add">点击+1</button>

  <h3>{{ user }}</h3>
  <button @click="user.age++">点击用户年龄加1</button>
  <button @click="user.name += '啊'">点击啊一下</button>
</template>

<script setup lang="ts">
// watch 侦听器(监视), 接收三个参数
//   1. 参数1: 监视的数据源
//   2. 参数2: 回调函数
//   3. 参数3: 额外的配置(可选)

import { ref, watch } from 'vue'

const money = ref(15000)
// 花钱按钮，每次点击少520
const spendBtn = () => {
  money.value -= 520
}

const count = ref(0)
const add = () => {
  count.value++
}

// 侦听 money 的变化
//    val      表示最新值
//    oldVal   表示旧值

// 写法1：侦听一个响应式数据
// watch(money, (val, oldVal) => {
//   console.log('原金额(旧值)', oldVal)
//   console.log('变化后金额(最新值)', val)
// })

// 写法2补充：参数1支持同时监视多个响应式数据
// watch([money, count], (val, oldVal) => {
//   console.log('原金额(旧值)', oldVal)
//   console.log('变化后金额(最新值)', val)
// })

const user = ref({
  name: 'zs',
  age: 18,
})

// 写法3：深度侦听对象
// watch(
//   user,
//   () => {
//     console.log('watch被触发了', user)
//   },
//   // 参数3：侦听器配置项
//   {
//     // 深度侦听(深度侦听对象)
//     deep: true,
//     // 立即执行
//     immediate: true,
//   },
// )

// 写法4：侦听对象的某个属性
watch(
  () => user.value.age,
  val => {
    console.log('你对象的年龄增加了', val)
  },
)
</script>
